<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />

    <link href="../assets/css/select2.min.css" rel="stylesheet" >
    <link href="../assets/css/checkbox3.min.css" rel="stylesheet" >
    <!-- Custom Styles-->
    <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
     <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
</head>
<body>


<!--/. NAV TOP  -->

<div id="page-wrapper" >
    <br /><br /><br />
	 <div style="margin-left:-3%;">
    <div class="panel-body">
        <form class="form-inline">
             <div class="form-group" style="margin-left: 3%;">
                <label for="exampleInputName2">选择接收人角色:</label>
                <select class="selectbox" id="roleId">
	                <option value="">请选择</option>
	               	<c:forEach items="${roleList }" var="role">
	               		 <option value="${role.roleId }">${role.roleName }</option>
	               	</c:forEach>
	        </select>
            </div>
           <div class="form-group" style="margin-left: 1%;">
                <label for="exampleInputName2" >选择接收人:</label>
                <select class="selectbox" id="userId">
	                <option value="">请选择</option>
	                
	        </select>
            </div>
       
        </form>
    </div>
    </div>

    <div class="header">
        <h1 class="page-header" style="text-align: center">
            物业管理 <small>（1000112）</small>
        </h1>

    </div>


    <!-- <div id="page-inner"> -->
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">基本信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Basic Table
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                        <c:forEach items="${officeBasicList }" var="details">
                                             <tr>
                                                <td style="text-align: right;">
                                                   	 报账人：
                                                </td>
                                                <td>
                                                   ${details.userName }
                                                </td>

                                                <td style="text-align: right;">
                                                    	报账单位名称：
                                                </td>
                                                <td>
                                                    ${details.departmentName }
                                                </td>

                                                <td style="text-align: right;">公司代码：</td>
                                                <td>
                                                    ${details.companyid }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">报账时间：</td>
                                                <td>
                                                    ${details.reimbursementTime }
                                                </td>

                                                <td style="text-align: right;">
                                                    	费用发生日：
                                                </td>
                                                <td>
                                                    ${details.invoiceTime }
                                                </td >

                                                <td style="text-align: right;">报账人电话：</td>
                                                <td>
                                                   ${details.phone }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                   	 收支方式：
                                                </td>
                                                <td>
                                                    ${details.payments }
                                                </td>

                                                <td style="text-align: right;">
                                                    	是否员工代垫：
                                                </td>
                                                <td>
                                                      ${details.isAdvance }
                                                </td>
                                                <td style="text-align: right;">报账单号：</td>
                                                <td id="reimbursementId">${details.reimbursementId }</td>
                                            </tr>
                                            <tr >
                                                <td style="text-align: right;">
                                                    	发票类型：
                                                </td>
                                                <td >
                                                   ${details.invoiceTypeName }
                                                </td>
                                                <td style="text-align: right;">
                                                    	附单据张数：
                                                </td>
                                                <td >
                                                     ${details.reimbursementNumber }
                                                </td>
                                                <td style="text-align: right;">
                                                   	 是否个人专项：
                                                </td>
                                                <td >
                                                     ${details.isSingle }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                   	 报账说明：
                                                </td>
                                                <td colspan="5">
                                                     ${details.reimbursementExplain }
                                                </td>
                                            </tr>
                                            </c:forEach>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">明细信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Kitchen Sink
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                               
                                                <th>是否使用成本/资本预算</th>
                                                <th>预算责任中心</th>
                                                <th>报账金额（含税）</th>
                                                <th>报账金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                             <c:forEach items="${officeDetailList }" var="detail">
                                            <tr>
                                                <td>
                                                ${detail.isCostCapitalBudget }
                                                </td>
                                                <td >
                                                  ${detail.预算成本中心 }
                                                </td>
                                                <td >
                                                ${detail.reimbursementMoneyOfTax }
                                                </td>
                                                <td>
                                                    ${detail.reimbursementMoney }
                                                </td>
                                            </tr>
                                             </c:forEach>
                                            </tbody>
                                          
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <!--选项卡-->
                            <div class="panel panel-default">

                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li class=""><a href="#home" data-toggle="tab" aria-expanded="false">内部人信息</a>
                                        </li>
                                        <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">报账单影像</a>

                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="home">


                                            <!--表格-->
                                            <div class="panel panel-default">
                                                <!--   <div class="panel-heading">
                                                       Bordered Table
                                                   </div>-->

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive table-bordered">

                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>收款人</th>
                                                                <th>所属部门</th>
                                                                <th>员工编号</th>
                                                                <th>收款类型</th>
                                                                <th>公司名称</th>
                                                                <th>开户行</th>
                                                                <th>银行账号</th>
                                                                <th>金额</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <c:forEach items="${officeOtherList }" var="other">
                                                            <tr>
                                                           
                                                                <td>1</td>
                                                                  <td>
                                                                  ${other.userName }
                                                                  </td>
                                                                <td>
                                                               	   ${other.departmentName }
                                                                </td>
                                                                <td>
                                                                  ${other.userId }
                                                                </td>
                                                                <td>
                                                                   	${other.receivablesType }
                                                                </td>
                                                                <td>
                                                                  	  ${other.companyName }
                                                                </td>
                                                                <td>
                                                                  	  ${other.bankName }
                                                                </td>
                                                                <td>
                                                                  ${other.bankNumber }
                                                                </td>
                                                                <td>
                                                                   ${other.reimbursementMoney }
                                                                </td>
                                                            </tr>
																</c:forEach>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                                作者：1049794100@qq.com
                                                时间：2018-01-04
                                                描述：表格
                                            -->
                                        </div>
                                   <div class="tab-pane fade active in" id="profile">
                                	<div></div>
                                	&nbsp;&nbsp;
                                	<div style="margin-left: 1%;">
                                		<c:forEach  items="${imageList }" var="image">
                                            <img alt="" src="${image.enclosureUrl }">
                                            </c:forEach>
                                               <!--  <button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i>
                                                </button> -->
                                	</div>
                                </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

   <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">申请评论</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <br class="panel-body">
                                 <div class="panel-body">
                					<div class="sub-title">审批意见</div>
									<div>
									<br>
									 <textarea class="form-control" rows="3" id="approvalOpinion"></textarea>
									</div>
		           				</div>
		           				<div style="margin-left:1%">
									  <a href="#" class="btn btn-primary" onclick="workAgree()">同意</a>
									  <a href="#" class="btn btn-danger" style="margin-left:1%" onclick="workRejec()" >驳回</a>
									  <a href="#" class="btn btn-warning" style="margin-left:1%" onclick="workDisagree()" >不同意</a>
								</div>
								<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</div>
</div>

</div>
<!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<script src="../assets/js/select2.full.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".selectbox").select2();
    });
</script>
<!-- Custom Js -->
<script src="../assets/js/custom-scripts.js"></script>

<script type="text/javascript">

layui.use('layer', function(){
    var layer = layui.layer;
});

		$("#roleId").on("change",function(){
			var roleId = this.value;//当前的角色id
			console.log(roleId);
			console.log("11111---");
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/travelApplication/listUserNameAll.do",
				dataType:"json",
				data:{"roleId":roleId},
				success:function(data){
					console.log("成功了");
					if(data == null || data == ""){
						console.log("没数据");
						$("#userId").children().remove();
					}else {
						var str = "";
						$("#userId").children().remove();
						$.each(data,function(key,val){
							str += '<option value='+ val.userId +'>'+val.userName+'</option>';
							console.log(key);
							console.log("-----");
							console.log(val);
						});
						$("#userId").append(str);
					}
				},
				error:function(data){
					console.log(data);
				}
			});
		});
		
		function workAgree(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待办" ;//工作状态名称
			var userId =parseInt($('#userId option:selected').val()) ;//用户id
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="同意" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已办" ;//需要修改的审批状态  */
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				"userId":userId,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalAgreeAndBckLog.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		});
			
			
			
		}
		
		function workDisagree(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待办" ;//工作状态名称
			//var userId =parseInt($('#userId option:selected').val()) ;//用户id
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="未同意" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已办" ;//需要修改的审批状态  */
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				//"userId":userId,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalDisAgreeAndBackLog.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		});					
		}
		function workReject(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待办" ;//工作状态名称
			//var userId =parseInt($('#userId option:selected').val()) ;//用户id
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="驳回" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已办" ;//需要修改的审批状态  */
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				//"userId":userId,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalDisAgreeAndBackLog.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		   });						
		}
	</script>

</body>
</html>